<template>
  <div class="content">
    <div class="backpack">
      <ul class="backpack_title">
        <li class="backpack_title_name" v-for="title in backpack_titles" :key="title.type" v-bind:class="{active: title.on}" v-on:click="switchTitle(title, $event)">{{title.name}}</li>
      </ul>
      <ul class="backpack_goods">
        <li class="backpack_goods_item" v-bind:class="{backpack_goods_item_new: good.isActive}" v-for="good in goods" :key="good.id"
          v-on:click="detailClick(good)">
          <img v-bind:src="good.src">
          <span v-if="good.count != 1">{{good.count}}</span>
        </li>
      </ul>
    </div>
    <div class="footer">
      <p class="gold">
        <span class="gold_icon"></span>
        <span>元宝：</span>
        <span>{{gold}}</span>
      </p>
      <p class="tickets">
        <span class="tickets_icon"></span>
        <span>房卡</span>
        <span>{{tickets}}</span>
      </p>
    </div>
    <transition enter-active-class="bounceInDown">
      <BackpackPop v-if="popShow" :goodDesc="popData" v-on:popClose="messageFromSon" v-on:useGood="useGood" />
    </transition>
  </div>
</template>



<script>
import axios from "axios";
import utils from "../../scripts/utils";
// 组件
import BackpackPop from "../../components/BackpackPop";
export default {
  data() {
    return {
      backpack_titles: [
        {
          type: "all",
          on: true,
          name: "全部"
        },
        {
          type: 1,
          on: false,
          name: "表情"
        },
        {
          type: 5,
          on: false,
          name: "门票"
        },
        {
          type: 2,
          on: false,
          name: "实物"
        }
      ],
      goods: [],
      gold: 0,
      tickets: 0,
      popShow: false,
      popData: {}
    };
  },
  components: {
    BackpackPop
  },
  created() {
    //商品默认数据长度
    let defaultLength = 24;
    // 创建默认的数据结构
    for (let i = 0; i < defaultLength; i++) {
      this.goods.push({
        id: "",
        src: "",
        count: "",
        name: "",
        brief: "",
        descExchange: "",
        itemUsable: "",
        exchange: "",
        items: "",
        enable: false
      });
    }
    this.fetchData("全部");
  },
  methods: {
    switchTitle(title, event) {
      //切换标题
      for (let item in this.backpack_titles) {
        if (this.backpack_titles.hasOwnProperty(item)) {
          let element = this.backpack_titles[item];
          element.on = false;
          if (element.type === title.type) {
            element.on = true;
            this.fetchData(element.name);
          }
        }
      }
    },
    detailClick(data) {
      if (data.enable) {
        let sonData = {};
        sonData.exchange = data.exchange;
        sonData.src = data.src;
        sonData.title = data.name;
        sonData.desc = data.brief;
        sonData.content = data.descExchange;
        sonData.isUse = data.itemUsable;
        sonData.items = data.items;
        sonData.id = data.id;
        sonData.type = data.type;
        this.popData = sonData;
        this.popShow = true;
      }
    },
    fetchData(name, callBack) {
      let uid = utils.getUrlString("uid");
      axios
        .post("/api/mobile/backpack")
        .then(res => {
          let allGoods = [];
          let eGoods = [];
          let tGoods = [];
          let mGoods = [];
          let data = res.data;
          let types = {};
          data.forEach(item => {
            if (item.type != 0) {
              let good = {};
              good.id = item.id;
              good.src = require(`../images/goods/${item.id}.png`);
              good.count = item.count;
              good.isActive = false;
              good.name = item.name;
              good.id = item.id;
              good.brief = item.brief;
              good.type = item.type;
              good.enable = true;
              types[good.type] = true;
              good.descExchange = item.descExchange;
              good.itemUsable = false;
              if (
                item.type === 2 ||
                (item.type === 3 || (item.items.length > 0 && item.id != 6)) || item.type === 5
              ) {
                good.itemUsable = true;
              }
              good.exchange = item.exchange;
              good.items = item.items;
              if (item.type === 1) {
                eGoods.push(good);
              } else if (item.type === 5) {
                tGoods.push(good);
              } else if (item.type === 2 || item.type === 3) {
                mGoods.push(good);
              }
              allGoods.push(good);
            } else {
              item.name === "元宝" && (this.gold = item.count);
              item.name === "房卡" && (this.tickets = item.count);
            }
          });
          types = Object.keys(types);
          if (types.indexOf("1") === -1) {
            this.backpack_titles.forEach(item => {
              if (item.type == 1) {
                this.backpack_titles.splice(
                  this.backpack_titles.indexOf(item),
                  1
                );
              }
            });
          }
          if (types.indexOf("2") === -1 && types.indexOf(3) === -1) {
            this.backpack_titles.forEach(item => {
              if (item.type == 2) {
                this.backpack_titles.splice(
                  this.backpack_titles.indexOf(item),
                  1
                );
              }
            });
          }
          if (types.indexOf("5") === -1) {
            this.backpack_titles.forEach(item => {
              if (item.type == 5) {
                this.backpack_titles.splice(
                  this.backpack_titles.indexOf(item),
                  1
                );
              }
            });
          }
          if (name === "全部") {
            allGoods.length > 0 && (this.goods = this.initData(allGoods));
          } else if (name === "表情") {
            this.goods = this.initData(eGoods);
          } else if (name === "门票") {
            this.goods = this.initData(tGoods);
          } else if (name === "实物") {
            this.goods = this.initData(mGoods);
          }
          callBack && callBack();
        })
        .catch(err => {
          console.log(err);
        });
    },
    messageFromSon() {
      this.popShow = false;
    },
    initData(data) {
      if (data.length < 24) {
        for (let a = data.length; a < 24; a++) {
          data[a] = {
            id: "",
            src: "",
            count: "",
            name: "",
            brief: "",
            descExchange: "",
            itemUsable: "",
            exchange: "",
            items: "",
            enable: false
          };
        }
        return data;
      }
      return data;
    },
    useGood(data) {
      if (data.items.length > 0) {
        this.fetchData("全部", () => {
          for (let i = 0; i < this.goods.length; i++) {
            let g = this.goods[i];
            for (let j = 0; j < data.items.length; j++) {
              if (g.id === data.items[j].valueId) {
                this.goods[i].isActive = true;
              }
            }
          }
          setTimeout(() => {
            for (let i = 0; i < this.goods.length; i++) {
              let g = this.goods[i];
              if (g.isActive === true) {
                this.goods[i].isActive = false;
              }
            }
          }, 3000);
        });
        this.popShow = false;
      } else {
        this.$router.push({
          name: "backe",
          query: {
            data: JSON.stringify(data)
          }
        });
      }
    }
  }
};
</script>

<style scoped>
.content {
  height: 100%;
  background: url("../images/bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 0.4rem 0.2rem 0.5rem;
  width: 100%;
  overflow: hidden;
}

.backpack {
  border: 2px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(120, 170, 160, 0.4);
  border-radius: 0.2rem;
  height: 90%;
  overflow: hidden;
}

.backpack_title {
  border-bottom: 1px solid rgb(182, 211, 233);
  color: #b6d3ff;
  font-size: 0.24rem;
  padding: 4%;
  margin: 0 2%;
  display: flex;
}

.backpack_title_name {
  padding: 0.1rem 0.3rem;
}

.active {
  border: 2px solid #fff;
  border-radius: 0.08rem;
  color: #fff;
  font-size: 0.3rem;
  font-weight: 800;
  padding: 0.08rem 0.28rem;
  margin: -0.04rem;
}

.backpack_goods {
  height: 85%;
  padding: 0 5%;
  margin-top: 3%;
  overflow-y: auto;
}

.backpack_goods_item {
  background-color: rgba(0, 0, 0, 0.2);
  float: left;
  margin: 0.06rem;
  position: relative;
  width: 23%;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.backpack_goods_item_new {
  background: url("../images/effects/wangyebeibaosaoguang.gif") center no-repeat;
  background-color: rgba(0, 0, 0, 0.2);
  background-size: cover;
}

.backpack_goods_item span {
  bottom: 0.1rem;
  color: #fff;
  font-size: 0.24rem;
  position: absolute;
  right: 0.1rem;
}

.backpack_goods_item img {
  max-width: 1rem;
  max-height: 1rem;
  margin: 0.14rem 0;
}

.footer {
  color: #fff;
  display: flex;
  justify-content: space-around;
  margin-top: 0.5rem;
}

.footer p {
  background: url(../images/tongzhilan1.png) center center no-repeat;
  background-size: 100%;
  font-size: 0.3rem;
  line-height: 0.48rem;
  text-align: center;
  width: 50%;
}

.gold_icon,
.tickets_icon {
  display: inline-block;
  height: 0.48rem;
  width: 0.48rem;
  vertical-align: middle;
}

.gold_icon {
  background: url("../images/yuanbao01.png") no-repeat;
  background-size: contain;
  margin-top: 4px;
}

.tickets_icon {
  background: url("../images/fangka1.png") no-repeat;
  background-size: contain;
}
</style>
